<template>
	<div class="login bg">
		<div class="top"><video src="../assets/images/1.mp4" width="100%" autoplay="autoplay"></video></div>

		<div class="bottom">
			<div class="login-box">
				<component :is="status" v-if="show"></component>
			</div>
		</div>
	</div>
</template>

<script>
import UserLogin from '../components/Login/UserLogin.vue';
import UserRegister from '../components/Login/UserRegister.vue';

export default {
	name: 'MyLogin',
	components: {
		UserLogin,
		UserRegister,
	},
	data() {
		return {
			show: true,
			status: 'UserLogin',
		};
	},
	methods: {
		/** @method 登录注册切换  */
		changePage() {
			this.show = false;
			if (this.status == 'UserLogin') {
				this.status = 'UserRegister';
			} else {
				this.status = 'UserLogin';
			}
			this.show = true;
		},
	},
};
</script>

<style scoped>
.login {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #fddf6a;
}

.fixed {
	position: fixed;
}

.bottom {
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	background-color: #fddf6a;
}

.login-box {
	width: 80%;
	height: 100%;
	background: #fff;
	border-radius: 30px;
	position: absolute;
	top: -60px;
	background: url('../assets/images/login-bg.png') no-repeat center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.register {
	width: 50%;
	height: 50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20px;
	color: #355c84;
	font-size: 10px;
}

.login-type {
	display: flex;
	flex-direction: row;
}

.login-type img {
	margin: 20px;
}
</style>
